<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="css/style.css" />
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">兑换</h1>
		</header>

		<div class="duihuan">
			<ul class="mui-table-view">
				<li class="mui-table-view-cell mui-media">
					<a href="javascript:;" class="thum">
						<img class="mui-media-object mui-pull-left" src="img/book11.jpg">
						<div class="mui-media-body">
							<p class="book-title mui-ellipsis">《机械设计手册》2016年全新升级版</p>
							<p class='mui-ellipsis'> &nbsp;&nbsp;<span class="book-price">5000.00</span>柒币</p>
						</div>
					</a>
				</li>

			</ul>
			<form>
				<div class="form-list">
					<span>数量</span>
					<div class="mui-numbox mui-pull-right" data-numbox-step='1' data-numbox-min='1' data-numbox-max='20'>
						<button class="mui-btn mui-numbox-btn-minus" type="button">-</button>
						<input class="mui-numbox-input" type="number" />
						<button class="mui-btn mui-numbox-btn-plus" type="button">+</button>
					</div>
				</div>
				<div class="form-list">
					<span>合计</span><span class="mui-pull-right summary">5000.00</span>
				</div>
				<div class="form-list">
					<span>余额</span><span class="mui-pull-right remain">5000.00</span>
				</div>
				<div class="form-list">
					<span>支付后剩余</span><span class="mui-pull-right"><a href="charge.html">充值</a></span> <span class="mui-pull-right yue-tip">余额不足</span>
				</div>
			</form>
		</div>
		<div class="add-locate">
			<a href="#">
				<p>确认兑换</p>
			</a>
		</div>
		<script src="js/mui.min.js"></script>
		<script type="text/javascript" src="js/jquery-2.1.4.js"></script>
		<script type="text/javascript">
			mui.init();
			$(function() {

				$('.mui-numbox-btn-plus').click(function() {
					var s1 = parseInt($('.summary').text());
					var s0 = parseInt($('.remain').text());
					var s2 = parseInt(5000);
					var sb = parseInt($('.summary').text(s1 + s2));
					var re = parseInt($('.remain').text(s0 - s2));
					//console.log(re)
					//alert(re)
					if(s0 - s2 < 0) {
						mui.toast('您的余额不足', {
							duration: 'long',
							type: 'div'
						})

						$('.mui-numbox-btn-plus').attr('disabled', true);
						$('.yue-tip').show();

					} else {
						$('.yue-tip').hide();
					}
					//alert(typeof(sb))
				})

				$('.mui-numbox-btn-minus').click(function() {
					var s0 = parseInt($('.remain').text());
					var s1 = parseInt($('.summary').text());

					var s2 = parseInt(5000);
					$('.summary').text(s1 - s2);
					//alert(s1)
					var sc = $('.remain').text(s0 + s2);

					if(s0 + s2 > 0) {

						$('.yue-tip').hide();
					}

					//					if(parseInt(sc)<s1 ){
					//					$('.yue-tip').show();
					//				}else{
					//					$('.yue-tip').hide();
					//				}
					//alert(typeof(sb))
				})

			})
		</script>
	</body>

</html>